<template>
    <div
        class="free-get-bg"
        v-if="isShow"
    >
        <img
            class="be-vip-img"
            src="@/assets/images/home/be-vip-img.png"
            @click="goExperience"
        />
        <img
            class="close-btn"
            src="@/assets/images/home/be-vip-close.png"
            @click="isShow = false"
        />
    </div>
</template>

<script>
export default {
    name: 'FreeMethods',
    data() {
        return {
            isShow: false,
            userAccountInfo: ''
        }
    },
    mounted() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            this.axios.post('/api/user/data.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.userAccountInfo = data.data
                    this.isShow = true
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        goFreeGet() {
            this.isShow = false
        },
        goExperience() {
            this.$router.push('/experience')
        }
    }
}
</script>

<style lang="stylus" scoped>
.free-get-bg
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background-color rgba(0, 0, 0, 0.7)
    overflow hidden
    z-index 9
    .be-vip-img
        display block
        width 340px
        margin 100px auto 0 auto
    .close-btn
        position absolute
        top 66px
        right 30px
        width 25px
</style>

